import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { routerRedux } from 'dva/router';
import { Button, List, InputItem, NavBar, Icon, Toast, Checkbox, Flex } from 'antd-mobile';
import styles from './PhysicianAuthPage.css';
import InputImg from '../components/inputImg';
import locationSvg from '../svg/location.svg';

const AgreeItem = Checkbox.AgreeItem;

function PhysicianAuthPage({ physicianAuth, form, dispatch }) {
  const { selectedLoc, doctorInfoLoading, doctName, idCard,
    deptCode, deptName/* , titleCode*/,
     buttonStatus, specialization, imgSrc2, uploadToken, image } = physicianAuth;
  const { getFieldProps, getFieldError } = form;
  const onSelectHospital = () => {
    dispatch(routerRedux.push('/selectHospital'));
  };
  const onSelectDept = () => {
    dispatch(routerRedux.push('/selectDept'));
  };
  // const onSelectTitle = () => {
  //   dispatch(routerRedux.push('/selectDoctorLevel'));
  // };
  const onSelectSpecial = () => {
    dispatch(routerRedux.push('/selectSpecial'));
  };
  const bindDoctorName = (value) => {
    dispatch({
      type: 'physicianAuth/bindDoctorName',
      payload: {
        doctName: value,
      },
    });
  };
  const bindIdCard = (value) => {
    dispatch({
      type: 'physicianAuth/bindIdCard',
      payload: {
        idCard: value,
      },
    });
  };
  const toUpdateDoctorHead = () => {
    form.validateFields((error, value) => {
      if (!error) {
        dispatch({
          type: 'physicianAuth/saveDoctorInfo',
          payload: {
            name: value.doctName,
            idNo: value.idCard,
            hospitalName: selectedLoc.name,
            hospitalAddress: selectedLoc.address,
            hospitalAreaCode: selectedLoc.citycode,
            hospitalLat: selectedLoc.lat,
            hospitalLon: selectedLoc.lng,
            deptCode,
            deptName,
            // titleCode,
            specialization,
            image,
            isSpecialJob: value.isSpecialJob,
          },
        });
      }
    });
  };
  return (
    <div className={styles.normal}>
      <NavBar leftContent="取消" mode="light" onLeftClick={() => { dispatch(routerRedux.push('/doctors')); }} />
      <div className={styles.title}>填写医生信息</div>
      <div className={styles.attention}>所有信息不会公开，仅用于9K医生认证</div>
      <List renderHeader={() => ''} className="picker-list">

        <InputImg uploadToken={uploadToken} keyPrefix="doctor/head" />
        <img role="presentation" alt="" src={imgSrc2} className={styles.image} />
        <InputItem style={{ position: 'relative', height: '2rem' }} clear editable={false} extra={<Icon type="right" size="md" />} >医师头像</InputItem>
        <InputItem clear onBlur={bindDoctorName} {...getFieldProps('doctName', { rules: [{ required: true, message: '请填写医师姓名' }], initialValue: doctName })} error={!!getFieldError('doctName')} onErrorClick={() => { Toast.info(getFieldError('doctName').join(',')); }} placeholder="认证通过后不可更改，如实填写">医师姓名</InputItem>
        <InputItem clear onBlur={bindIdCard} {...getFieldProps('idCard', { rules: [{ required: true, message: '请填写身份证号' }, { pattern: '^(\\d{15}$|^\\d{18}$|^\\d{17}(\\d|X|x))$', message: '身份证信息不正确' }], initialValue: idCard })} error={!!getFieldError('idCard')} onErrorClick={() => { Toast.info(getFieldError('idCard').join(',')); }} placeholder="认证通过后不可更改，如实填写">身份证号</InputItem>
        <InputItem clear editable={false} {...getFieldProps('hospitalName', { rules: [{ required: true, message: '请选择医院' }], initialValue: selectedLoc.name })} value={selectedLoc.name} extra={<Icon type={locationSvg} size="md" onClick={() => { onSelectHospital(); }} />} onClick={() => { onSelectHospital(); }} placeholder="选择您的所在医疗机构">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院</InputItem>
        <InputItem clear editable={false} {...getFieldProps('deptCode', { rules: [{ required: true, message: '请选择科室' }, { pattern: '^[\u4e00-\u9fa5]{2,12}$', message: '科室名称为2-12个汉字' }], initialValue: deptName })} error={!!getFieldError('deptCode')} onErrorClick={() => { Toast.info(getFieldError('deptCode').join(',')); }} value={deptName} extra={<Icon type="right" size="md" onClick={() => { onSelectDept(); }} />} onClick={() => { onSelectDept(); }} placeholder="选择您的所在科室">科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室</InputItem>
        {/* <InputItem clear editable={false} {...getFieldProps('titleCode',
        { rules: [{ required: true, message: '请选择职称' }],
         initialValue: titleName })}
       value={titleName}
       extra={<Icon type="right" size="md" onClick={() => { onSelectTitle(); }} />}
        onClick={() => { onSelectTitle(); }} placeholder="选择您的职称">
        职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</InputItem> */}
        <InputItem clear editable={false} {...getFieldProps('specialization', { rules: [{ required: true, message: '请选择擅长疾病' }], initialValue: specialization })} value={specialization} extra={<Icon type="right" size="md" onClick={() => { onSelectSpecial(); }} />} onClick={() => { onSelectSpecial(); }} placeholder="输入您擅长的疾病">擅长疾病</InputItem>
      </List>
      <div className={styles.subbtn}>
        <Flex justify="center" style={{ marginTop: '20px' }}>
          <AgreeItem {...getFieldProps('isSpecialJob')} error={!!getFieldError('isSpecialJob')} >
            <span style={{ lineHeight: '28px' }}>
              <span style={{ fontSize: '0.35rem', color: '#333' }}>
            我是特殊职业</span>
              <span style={{ fontSize: '0.26rem', color: '#666' }}>
            （军人、特工、干部等）</span></span>
          </AgreeItem>
        </Flex>
        <Button className="btn" disabled={buttonStatus} loading={doctorInfoLoading} onClick={toUpdateDoctorHead} type="primary">下一步，上传医师头像</Button>
      </div>
    </div>
  );
}
function mapStateToProps({ physicianAuth }) {
  return { physicianAuth };
}

export default connect(mapStateToProps)(createForm()(PhysicianAuthPage));
